<template>
    <div class="header">
        <div class="header-return" @click="toDetail" v-show="showIcon">
            <span class="header-border"></span>
            <span class="iconfont">&#xe685;</span>
        </div>
    <div class="header-top" v-show="showTop" :style="styleOpacity">

      重庆两江游
    </div>
<div style="height:2000px"></div>
  </div>

 
</template>
<script>
export default {
    data() {
        return {
            showIcon:true,
            showTop:false,
            styleOpacity:{
                opacity:0
            }
        }
    },
    mounted() {
        let that = this
        window.addEventListener("scroll",function(){
            let top = document.documentElement.scrollTop
            let num = top/33
            if(top>33){
                let opacity = top/100
                opacity>1?1:opacity
                that.styleOpacity = {opacity}
                that.showTop = true
            }else{
                that.showTop = false
            }
        })
    },
    methods: {
        toDetail(){
            this.$router.push("/")
        }
    },
}
</script>
<style scoped>
.header-return{
    position: absolute;
    left: .1rem;
    top: .1rem;
    width: .72rem;
    height: .72rem;
}
.header-border{
    background-color: black;
    width: .72rem;
    height: .72rem;
    opacity: .5;
    border-radius: .36rem;
    display: block;
}
.iconfont{
    color: white;
    position: absolute;
    left: 0;
    top: 0;
    width: .72rem;
    line-height: .72rem;
    text-align: left;
    text-indent: .24rem;
}
.header-top{
    width: 100vw;
    position: fixed;
    top:.2rem;
    left: 0%;
    padding-left: 36% ;
    color: yellow;
    font-size: .40rem;
}

</style>